$(function () {
    (function () {
        var topCalculate = function (el) {
            var maxHeight = 0;

            $(el).each(function () {
                var col = $(this).prop('class').split(" ")[1],
                    $prevEl = $(this).prevAll('.' + col).filter(':first'),
                    prevHeight = $prevEl.height() || 0,
                    prevTop = $prevEl.prop('offsetTop') || 0;

                $(this).css("top", prevTop + prevHeight + 15);
                maxHeight = Math.max(maxHeight, parseInt($(this).prop('offsetTop')) + $(this).height() + 15);
            });
            $(el).parent().height(maxHeight);
        };

        var isLoad = true,
            t_img;

        var imgsIsLoad = function () {
            $('.cg-shirt-img').each(function () {
                if (this.height === 0) {
                    isLoad = false;
                }
            });

            if (isLoad) {
                clearTimeout(t_img);
                topCalculate($('.cg-shirt'));
            } else {
                isLoad = true;
                a_img = setTimeout(imgsIsLoad, 500);
            }
        };
        imgsIsLoad();

        var ajaxNum = 1,
            col = ['col_01', 'col_02', 'col_03', 'col_04', 'col_01', 'col_02', 'col_03', 'col_04'];

        var shirtAjaxHandle = function (data) {
            var result = data.imgs,
                curT,
                i = 0, str = '';
            $('.cg-error').hide();
            for (; i < result.length; i++) {
                curT = result[i];
                str += '<div class="cg-shirt ' + col[i] + '" data-shirtId=' + curT.shirtId + '>';
                str += '<a href=' + curT.shirtSrc + '>';
                str += '<img src=' + curT.imgSrc + ' alt=' + curT.desc + ' class="img-thumbnail cg-shirt-img">';
                str += '</a>';
                str += '<div class="t-topbar">';
                str += '<a href="" class="btn btn-danger tb-buy">';
                str += '<span class="glyphicon glyphicon-shoppingcart" aria-hidden="true"></span> 购买';
                str += '</a>';
                str += '<a href="" class="btn btn-default tb-comment">';
                str += '<span class="glyphicon glyphicon-comment"></span>';
                str += '</a>';
                str += '<button type="button" href="" class="btn btn-default tb-vote">';
                str += '<span class="glyphicon glyphicon-thumbs-up"></span>';
                str += '</button>' + '</div>' + '</div>';
            }
            $('.cg-shirts').append(str);

            imgsIsLoad();
        };

        var themeAjaxHandle = function (data) {
            var result = data.themes,
                curT,
                i = 0, str = '';
            $('.cg-error').hide();
            for (; i < result.length; i++) {
                curT = result[i];
                str += '<div class="cg-shirt ' + col[i] + ' co-theme' + '" data-themeId=' + curT.themeId + '>';
                str += '<a href=' + curT.themeSrc + '>';
                str += '<img src=' + curT.imgSrc + ' alt=' + curT.desc + ' class="img-thumbnail cg-shirt-img">';
                str += '</a>';
                str += '<p class="co-themeName">' + curT.themeName + '</p>';
                str += '<p class="co-themeDesc">' + curT.desc + '</p>';
                str += '</div>';
            }
            $('.cg-shirts').append(str);

            imgsIsLoad();
        };

        var flowAjax = function () {
            if (ajaxNum < 6) {
                $.ajax({
                    url: '/img/more?page=' + ajaxNum,
                    type: 'GET',
                    dataType: 'json'
                })
                    .done(function (data) {
                        if (!$('.cg-shirt:first')[0].dataset.themeid) {
                            shirtAjaxHandle(data);
                        } else {
                            themeAjaxHandle(data);
                        }

                        ajaxNum++;
                    })
                    .fail(function () {
                        $('.cg-error').show();
                    });
            } else {
                $('.cg-more').show();
            }
        };

        $(document).scroll(function (event) {
            if ($('body').scrollTop() >= $(document).height() - $(window).height()) {
                flowAjax();
            }
        });

        $(document).ajaxSend(function (event, xhr, settings) {
            if (settings.url === '../test_data/flow.json') {
                $('.loading').show();
            }
        }).ajaxComplete(function (event, xhr, settings) {
            if (settings.url === '../test_data/flow.json') {
                $('.loading').hide();
            }
        });

        $('.cg-error').click(function (event) {
            flowAjax();
        });

        $('.cg-more').click(function (event) {
            ajaxNum = 6;
            flowAjax();
            $(this).hide();
        });
    })();
});